<template>
  <div class="body" @keyup.enter="submit">
    <!--<div class="slider">-->
      <!--<div class="slider-item">-->
        <!--<template v-for="(img,i) in images">-->
          <!--<transition name="fade">-->
            <!--<img :src="img" v-show="i === imgIndex">-->
            <!--&lt;!&ndash;<img :src="img">&ndash;&gt;-->
          <!--</transition>-->
        <!--</template>-->
      <!--</div>-->
    <!--</div>-->
    <div class="content">
      <div class="box" ref="box">
        <div class="box-header">
          <span class="title">欢乐中国应用管理系统</span>
        </div>
        <div class="box-body">
          <el-input
            v-model.trim="sign"
            placeholder="用户名/手机号码/邮箱">
            <i slot="prefix"  class="el-input__icon an-mall-icon icon-username"></i>
          </el-input>
          <el-input
            v-model.trim="password"
            type="password"
            size="big"
            placeholder="请输入密码">
            <i slot="prefix"  class="el-input__icon an-mall-icon icon-password"></i>
          </el-input>
          <div class="buttons">
            <el-button
              type="primary"
              @click="submit">
              登录 <i class="an-mall-icon icon-enter"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        sign: '',
        password: '',
        token: this.getToken(),
        images: [
          require('@assets/signIn/sign_in_1.jpg'),
          require('@assets/signIn/sign_in_2.jpg'),
          require('@assets/signIn/sign_in_3.jpg'),
          require('@assets/signIn/sign_in_4.jpg'),
          require('@assets/signIn/sign_in_5.jpg'),
          require('@assets/signIn/sign_in_6.jpg'),
          require('@assets/signIn/sign_in_7.jpg')
        ],
        imgIndex: 0
      }
    },
    methods: {
      submit () {
        if (!this.sign) {
          this.$message({
            message: '登录账号不能为空!',
            type: 'error'
          })
          return false
        }
        /*eslint-disable */
        // if (!(/^1[3|4|5|6|7|8]\d{9}$/).test(this.sign) &&
        //   !(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)
        //     .test(this.sign) &&
        //   !(/^[a-zA-Z\\d_]{6,}$/).test(this.sign)
        // ) {
        //   this.$message({
        //     message: '用户名或手机号码或邮箱格式错误',
        //     type: 'error'
        //   })
        //   return false
        // }
        /*eslint-enable */
        if (!this.password) {
          this.$message({
            message: '密码不能为空!',
            type: 'error'
          })
          return false
        }
        this.showLoading(this.$refs.box)
        this
          .$api
          .sign
          .signByPassword(this.sign, this.password)
          .then(r => {
            this.closeLoading()
            this.$store.dispatch('setUserInfo', r.info)
            this.setToken(r.token)
            this.jump({
              name: 'dashboard'
            })
            this.$message({
              message: '登录成功!',
              type: 'success'
            })
          }).catch(() => {
            this.closeLoading()
          })
      }
      /**
       * 背景轮播
       */
      // slider () {
      //   setInterval(() => {
      //     if (this.imgIndex < (this.images.length - 1)) {
      //       this.imgIndex++
      //     } else {
      //       this.imgIndex = 0
      //     }
      //   }, 10000)
      // }
    },
    created () {
      if (this.token) {
        this
          .$api
          .sign
          .clearToken(() => {
            this.clearToken()
          })
      }
    }
  }
</script>
<style scoped lang="sass">
.body
  width: 100%
  height: 100%
  position: relative
  background-color: #2d3a4b
  .slider
    width: 100%
    height: 100%
    .slider-item
      width: 100%
      height: 100%
      position: relative
      img
        width: 100%
        height: 100%
        filter: blur(10px)
        position: absolute
        top: 0
        left: 0
        z-index: 9
  .content
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
    background-color: transparent
    z-index: 9
    display: flex
    align-items: center
    justify-content: center
    .box
      height: 300px
      width: 30%
      max-width: 30rem
      background-color: #ffffff
      box-shadow: 0 0 20px #eef1f6
      min-width: 25rem
      border-radius: 5px
      overflow: hidden
      .box-header
        width: 100%
        height: 60px
        background-color: #324157
        border-top-right-radius: 5px
        border-top-left-radius: 5px
        box-shadow: 0 2px 10px #324157
        display: flex
        align-items: center
        padding: 0 20px
        >span.title
          font-size: 20px
          color: #ffffff
      .box-body
        width: calc(100% - 40px)
        margin: 0 auto
        height: 220px
        margin-top: 10px
        display: flex
        flex-direction: column
        .el-input
          margin: 20px 0
        .buttons
          width: 100%
          flex: 1
          display: flex
          align-items: center
          flex-direction: row-reverse
// 过渡动画
.fade-enter-active,
.fade-leave-active
  transition: opacity .9s

.fade-enter,
.fade-leave-to /* .fade-leave-active in below version 2.1.8 */
  opacity: 0

</style>
